<!DOCTYPE html>
<html
	lang="zh"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
		<link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet" />
		<!-- bootstrap-table 表格插件样式 -->
		<link
			href="ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.22.6"
			rel="stylesheet"
		/>
		<link href="css/animate.min.css?v=20210831" rel="stylesheet" />
		<link href="css/style.min.css?v=20210831" rel="stylesheet" />
		<link href="ruoyi/css/ry-ui.css?v=4.8.0" rel="stylesheet" />

		<script src="js/jquery.min.js?v=3.6.3"></script>
		<script src="js/bootstrap.min.js?v=3.3.7"></script>
		<!-- bootstrap-table 表格插件 -->
		<script src="ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.22.6"></script>
		<script src="ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.22.6"></script>
		<script src="ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.22.6"></script>
		<!-- jquery-validate 表单验证插件 -->
		<script src="ajax/libs/validate/jquery.validate.min.js?v=1.21.0"></script>
		<script src="ajax/libs/validate/jquery.validate.extend.js?v=1.21.0"></script>
		<script src="ajax/libs/validate/messages_zh.js?v=1.21.0"></script>
		<!-- bootstrap-table 表格树插件 -->
		<script src="ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.22.6"></script>
		<!-- 遮罩层 -->
		<script src="ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
		<script src="ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
		<script src="ajax/libs/layer/layer.min.js?v=3.7.0"></script>
		<script src="ajax/libs/layui/layui.min.js?v=2.8.18"></script>
		<script src="ruoyi/js/common.js?v=4.8.0"></script>
		<script src="ruoyi/js/ry-ui.js?v=4.8.0"></script>
	</head>
	<body class="gray-bg">
		<div class="app-container">
			<img src="img/loading/bg.png" class="bg-img" />
			<div class="monitor-wrapper" id="monitor-wrapper">
				<div class="monitor-header">
					<img src="img/loading/load-icon.png" class="load-icon" />
					<!-- 龙门吊架构图 -->
					<div class="structure">
						<img src="img/loading/structure.png" class="structure" />
						<div class="alert-wrapper" style="left: 30px; top: 100px">
							<div
								class="clean-alert-wrapper"
								style="width: 88px; height: 36px"
							>
								<img
									src="img/loading/alert-bg.png"
									style="width: 100%; height: 100%"
								/>
								<div class="clean-alert-wrapper-desc">
									<div class="desc">异常报警</div>
									<div class="desc-text">x轴异常报警</div>
								</div>
							</div>
							<img src="img/loading/alert.png" class="clean_alert" />
						</div>
						<div class="alert-wrapper" style="left: 200px; top: 40px">
							<div
								class="clean-alert-wrapper"
								style="width: 88px; height: 36px"
							>
								<img
									src="img/loading/alert-bg.png"
									style="width: 100%; height: 100%"
								/>
								<div class="clean-alert-wrapper-desc">
									<div class="desc">异常报警</div>
									<div class="desc-text">x轴异常报警</div>
								</div>
							</div>
							<img src="img/loading/alert.png" class="clean_alert" />
						</div>
						<div class="alert-wrapper" style="left: 500px; top: 60px">
							<div
								class="clean-alert-wrapper"
								style="width: 88px; height: 36px"
							>
								<img
									src="img/loading/alert-bg.png"
									style="width: 100%; height: 100%"
								/>
								<div class="clean-alert-wrapper-desc">
									<div class="desc">异常报警</div>
									<div class="desc-text">x轴异常报警</div>
								</div>
							</div>
							<img src="img/loading/alert.png" class="clean_alert" />
						</div>
						<div class="alert-wrapper" style="left: 700px; top: 50px">
							<div
								class="clean-alert-wrapper"
								style="width: 88px; height: 36px"
							>
								<img
									src="img/loading/alert-bg.png"
									style="width: 100%; height: 100%"
								/>
								<div class="clean-alert-wrapper-desc">
									<div class="desc">异常报警</div>
									<div class="desc-text">x轴异常报警</div>
								</div>
							</div>
							<img src="img/loading/alert.png" class="clean_alert" />
						</div>
						<div class="alert-wrapper" style="right: 100px; bottom: 50px">
							<div
								class="clean-alert-wrapper"
								style="width: 88px; height: 36px"
							>
								<img
									src="img/loading/alert-bg.png"
									style="width: 100%; height: 100%"
								/>
								<div class="clean-alert-wrapper-desc">
									<div class="desc">异常报警</div>
									<div class="desc-text">x轴异常报警</div>
								</div>
							</div>
							<img src="img/loading/alert.png" class="clean_alert" />
						</div>
					</div>
					<!-- 报警信息 -->
					<div class="tip-wrapper">
						<img src="img/loading/tip.png" class="tip" id="tip" />
						<div class="tip-wrapper-list" id="tip-wrapper-list">
							<img
								src="img/loading/tip-header.png"
								style="width: 100%; height: 80px"
							/>
							<div class="tip-wrapper-list-item">
								<div style="display: flex; align-items: center">
									<img src="img/loading/round-icon.png" class="round-icon" />
									<div>x轴异常报警</div>
								</div>
								<div style="font-size: 14px">12:30:24</div>
							</div>
							<div class="tip-wrapper-list-item">
								<div style="display: flex; align-items: center">
									<img src="img/loading/round-icon.png" class="round-icon" />
									<div>x轴异常报警</div>
								</div>
								<div style="font-size: 14px">12:30:24</div>
							</div>
							<div class="tip-wrapper-list-item">
								<div style="display: flex; align-items: center">
									<img src="img/loading/round-icon.png" class="round-icon" />
									<div>x轴异常报警</div>
								</div>
								<div style="font-size: 14px">12:30:24</div>
							</div>
							<div class="tip-wrapper-list-item">
								<div style="display: flex; align-items: center">
									<img src="img/loading/round-icon.png" class="round-icon" />
									<div>x轴异常报警</div>
								</div>
								<div style="font-size: 14px">12:30:24</div>
							</div>
							<div class="tip-wrapper-list-item">
								<div style="display: flex; align-items: center">
									<img src="img/loading/round-icon.png" class="round-icon" />
									<div>x轴异常报警</div>
								</div>
								<div style="font-size: 14px">12:30:24</div>
							</div>
						</div>
					</div>
				</div>

				<div class="monitor-status">
					<div class="monitor-status-wrapper">
						<div class="monitor-status-item">
							<img
								src="img/loading/status-title.png"
								class="status-title-img"
							/>
							<div class="monitor-status-item-title">龙门吊运行状态</div>
							<div class="timer">
								数据更新时间：<span
									th:text="数据更新时间"
									id="currentDateTime"
								></span>
							</div>
						</div>

						<div class="monitor-count-item">
							<img src="img/loading/count-title.png" class="count-img" />
							<div class="monitor-count-item-title">
								<div>当天吊运工件数量计数</div>
								<div class="num" th:text="2930" id="hoistCount">1090件</div>
							</div>

							<div class="monitor-position">
								<div class="monitor-position-left">
									<img src="img/loading/position-bg.png" style="width: 100%" />
									<div class="monitor-position-left-title" th:text="x轴">
										标题
									</div>
								</div>
								<div class="monitor-position-right">
									<div class="monitor-position-right-item green">
										<img src="img/loading/run-bg.png" style="width: 100%" />
										<div class="monitor-position-right-desc">
											<img
												src="img/loading/green.png"
												style="width: 10px; height: 10px"
											/>
											<div class="run-title">运行位置</div>
											<div class="run-num" th:text="aaa" id="positionX">
												位置
											</div>
										</div>
									</div>
									<div class="monitor-position-right-item blue">
										<img src="img/loading/run-bg.png" style="width: 100%" />
										<div class="monitor-position-right-desc">
											<img
												src="img/loading/blue.png"
												style="width: 10px; height: 10px"
											/>
											<div class="run-title">运行速度</div>
											<div class="run-num" th:text="222" id="speedX">速度</div>
										</div>
									</div>
								</div>
							</div>
							<div class="monitor-position">
								<div class="monitor-position-left">
									<img src="img/loading/position-bg.png" style="width: 100%" />
									<div class="monitor-position-left-title" th:text="y轴">
										标题
									</div>
								</div>
								<div class="monitor-position-right">
									<div class="monitor-position-right-item green">
										<img src="img/loading/run-bg.png" style="width: 100%" />
										<div class="monitor-position-right-desc">
											<img
												src="img/loading/green.png"
												style="width: 10px; height: 10px"
											/>
											<div class="run-title">运行位置</div>
											<div class="run-num" th:text="333" id="positionY">
												位置
											</div>
										</div>
									</div>
									<div class="monitor-position-right-item blue">
										<img src="img/loading/run-bg.png" style="width: 100%" />
										<div class="monitor-position-right-desc">
											<img
												src="img/loading/blue.png"
												style="width: 10px; height: 10px"
											/>
											<div class="run-title">运行速度</div>
											<div class="run-num" th:text="444" id="speedY">速度</div>
										</div>
									</div>
								</div>
							</div>
							<div class="monitor-position">
								<div class="monitor-position-left">
									<img src="img/loading/position-bg.png" style="width: 100%" />
									<div class="monitor-position-left-title" th:text="Z轴">
										标题
									</div>
								</div>
								<div class="monitor-position-right">
									<div class="monitor-position-right-item green">
										<img src="img/loading/run-bg.png" style="width: 100%" />
										<div class="monitor-position-right-desc">
											<img
												src="img/loading/green.png"
												style="width: 10px; height: 10px"
											/>
											<div class="run-title">运行位置</div>
											<div class="run-num" th:text="555" id="positionZ">
												位置
											</div>
										</div>
									</div>
									<div class="monitor-position-right-item blue">
										<img src="img/loading/run-bg.png" style="width: 100%" />
										<div class="monitor-position-right-desc">
											<img
												src="img/loading/blue.png"
												style="width: 10px; height: 10px"
											/>
											<div class="run-title">运行速度</div>
											<div class="run-num" th:text="666" id="speedZ">速度</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="monitor-status-wrapper">
						<div class="monitor-status-item">
							<img
								src="img/loading/status-title.png"
								class="status-title-img"
							/>
							<div class="monitor-status-item-title">真空吸盘运行状态</div>
						</div>
						<div class="monitor-count-item">
							<img src="img/loading/count-title.png" class="count-img" />
							<div class="monitor-count-item-title">
								<div>真空吸盘数量</div>
								<div class="num" th:text="9080" id="vacuumStatus">1090件</div>
							</div>
							<div class="monitor-count-status">
								<img src="img/loading/empty-bg.png" class="empty-bg-img" />
								<div class="monitor-count-status-desc">
									<div class="title">真空泵真空度（%）</div>
									<div class="num">
										<span th:text="100" id="vacuumPressure">69</span>/100
									</div>
									<!-- 用 div 替代 el-progress -->
									<div class="progress">
										<div
											id="vacuumPressureProgress"
											class="progress-bar"
											role="progressbar"
											aria-valuenow="95"
											aria-valuemin="0"
											aria-valuemax="100"
											style="width: 95%"
										>
											95%
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="monitor-status-wrapper" style="width: 30%">
						<div class="monitor-status-item">
							<img
								src="img/loading/status-title.png"
								class="status-title-img"
							/>
							<div class="monitor-status-item-title">龙门吊异常状态</div>
						</div>
						<div class="monitor-status-run-wrapper" style="margin-top: 15px">
							<div class="monitor-status-run">
								<img src="img/loading/battery.png" class="battery" />
								<div>x轴状态正常</div>
							</div>
							<div class="monitor-status-run">
								<img src="img/loading/battery.png" class="battery" />
								<div>y轴状态正常</div>
							</div>
							<div class="monitor-status-run">
								<img src="img/loading/battery.png" class="battery" />
								<div>z轴状态正常</div>
							</div>
						</div>

						<div class="monitor-status-item">
							<img
								src="img/loading/status-title.png"
								class="status-title-img"
							/>
							<div class="monitor-status-item-title">真空吸盘异常状态</div>
						</div>
						<div class="monitor-status-run-wrapper" style="margin-top: 15px">
							<div class="monitor-status-run">
								<img src="img/loading/battery.png" class="battery" />
								<div>吸盘工作正常</div>
							</div>
							<div class="monitor-status-run">
								<img src="img/loading/battery.png" class="battery" />
								<div>真空吸盘真空度正常</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script th:inline="javascript">
			$('#tip').click(function (e) {
				e.stopPropagation(); //阻止事件冒泡
				$('#tip-wrapper-list').css('display', 'block');
			});
			$('#monitor-wrapper').click(function () {
				$('#tip-wrapper-list').css('display', 'none');
			});
			var refleshAlarm = 1500;
			var refleshStatus = 1500;

			function getLoadingStatusInfo() {
				resStr =
					'{"loadingStatus":{"positionX":153.9684,"positionY":153.9684,"positionZ":153.9684,"speedX":153.9684,"speedY":153.9684,"speedZ":153.9684,"workplaceStatus":76,"hoistCount":76,"vacuumPressure":153.9684,"vacuumStatus":76},"updateTime":1742806730447}';
				res = JSON.parse(resStr);

				$('#positionX').text(res.loadingStatus.positionX);
				$('#positionY').text(res.loadingStatus.positionY);
				$('#positionZ').text(res.loadingStatus.positionZ);
				$('#speedX').text(res.loadingStatus.speedX);
				$('#speedY').text(res.loadingStatus.speedY);
				$('#speedZ').text(res.loadingStatus.speedZ);
				$('#hoistCount').text(res.loadingStatus.hoistCount);
				$('#vacuumPressure').text(res.loadingStatus.vacuumPressure);
				updateProgress(res.loadingStatus.vacuumPressure);
				$('#vacuumStatus').text(res.loadingStatus.vacuumStatus);
				$('#currentDateTime').text(formatDateTime(res.updateTime));

				var workplaceStatus = res.loadingStatus.workplaceStatus;
				if (workplaceStatus == 1) {
					//$('#myDiv').attr('class', 'a');
				} else if (workplaceStatus == 2) {
					//$('#myDiv').attr('class', 'a');
				} else {
					//$('#myDiv').attr('class', 'a');
				}
			}

			// 每15秒轮询一次
			setInterval(getLoadingStatusInfo, refleshStatus);
			// 初始请求一次
			getLoadingStatusInfo();

			function getLoadingAlarmInfo() {
				//字符串转json
				resStr =
					'{"loadingAlarms":[{"component":0,"alarmType":0,"deviceSn":0},{"component":0,"alarmType":1,"deviceSn":0},{"component":0,"alarmType":2,"deviceSn":0},{"component":1,"alarmType":3,"deviceSn":0},{"component":1,"alarmType":4,"deviceSn":0}],"updateTime":1742806730444}';
				res = JSON.parse(resStr);

				var updateTime = formatDateTime(res.updateTime);
				// 遍历 loadingAlarms 数组
				res.loadingAlarms.forEach(function (alarm, index) {
					console.log('第 ' + (index + 1) + ' 条报警:');
					console.log('  组件 component:', alarm.component);
					console.log('  报警类型 alarmType:', alarm.alarmType);
					console.log('  设备序列号 deviceSn:', alarm.deviceSn);
				});
			}

			// 每15秒轮询一次
			setInterval(getLoadingAlarmInfo, refleshAlarm);
			// 初始请求一次
			getLoadingAlarmInfo();

			function updateProgress(percent) {
				$('#vacuumPressureProgress')
					.attr('aria-valuenow', percent)
					.css('width', percent + '%')
					.text(percent + '%');
			}

			function formatDateTime(updateTime) {
				var date = new Date(updateTime);
				var formatted =
					date.getFullYear() +
					'-' +
					String(date.getMonth() + 1).padStart(2, '0') +
					'-' +
					String(date.getDate()).padStart(2, '0') +
					' ' +
					String(date.getHours()).padStart(2, '0') +
					':' +
					String(date.getMinutes()).padStart(2, '0') +
					':' +
					String(date.getSeconds()).padStart(2, '0');
				return formatted;
			}
		</script>
		<style>
			.tip-wrapper {
				position: relative;
			}

			.tip-wrapper-list {
				position: absolute;
				right: 0;
				top: 0;
				width: 364px;
				height: 353px;
				background: #ffffff;
				border-radius: 4px;
				z-index: 100;
				padding: 18px;
			}
			.tip-wrapper-list-item {
				width: 328px;
				height: 31px;
				line-height: 31px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: rgba(255, 99, 16, 0.05);
				padding: 0 5px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 16px;
				color: #00173a;
				text-align: left;
				font-style: normal;
				margin-bottom: 10px;
			}
			.tip-wrapper-list-item .round-icon {
				width: 16px;
				height: 16px;
				margin-right: 10px;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}

			.app-container {
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
			}

			.app-container .bg-img {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
			}

			.app-container .monitor-wrapper {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				width: 100%;
				bottom: 0;
				z-index: 3;
				padding: 20px;
			}

			.monitor-header {
				display: flex;
				width: 100%;
			}

			.monitor-header .load-icon {
				margin-left: 15px;
				margin-top: 17px;
				width: 71px;
				height: 23px;
			}

			.monitor-header .structure {
				flex-grow: 1;
				width: 100%;
				height: 250px;
				position: relative;
			}

			.structure .alert-wrapper {
				position: absolute;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.structure .clean-alert-wrapper {
				position: relative;
			}

			.structure .clean-alert-wrapper-desc {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 8px;
				color: #ffffff;
				text-align: center;
				font-style: normal;
				padding-top: 5px;
			}

			.structure .clean-alert-wrapper-desc .desc {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 9px;
				color: #ff0404;
				font-style: normal;
			}

			.structure .alert-wrapper .clean_alert {
				margin-top: 5px;
				width: 24px;
				height: 24px;
			}

			.monitor-header .tip {
				width: 41px;
				height: 40px;
				margin-top: 12px;
			}

			.monitor-status {
				display: flex;
				margin: 30px 12px 0;
			}

			.monitor-status-wrapper {
				width: 35%;
			}

			.monitor-status-item {
				width: 100%;
				position: relative;
			}

			.monitor-status-item-title {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				font-size: 14px;
				color: #ffffff;
				text-align: left;
				font-style: normal;
				position: absolute;
				left: 15%;
				top: 2px;
			}

			.monitor-status-item .timer {
				position: absolute;
				right: 10px;
				bottom: 0px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 8px;
				color: #ffffff;
				line-height: 22px;
				text-align: left;
				font-style: normal;
			}

			.status-title-img {
				width: 100%;
				height: 30px;
			}

			.monitor-count {
				display: flex;
				margin: 30px 12px 0;
			}

			.monitor-count-item {
				margin-right: 10px;
				margin-top: 15px;
				position: relative;
			}

			.monitor-count-item .count-img {
				width: 100%;
				height: 45px;
			}

			.monitor-count-item-title {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				font-size: 13px;
				color: #ffffff;
				line-height: 45px;
				text-align: left;
				font-style: normal;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left: 0;
				right: 0;
				padding: 0 13px;
				top: 0;
			}

			.monitor-count-item-title .num {
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 18px;
				color: #69d9fe;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.monitor-count-status {
				position: relative;
				margin-top: 10px;
			}

			.empty-bg-img {
				width: 100%;
				height: 111px;
			}

			.monitor-count-status-desc {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 3;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				padding: 20px;
				font-size: 13px;
				color: #ffffff;
				text-align: left;
				font-style: normal;
			}

			.monitor-count-status-desc .title {
				margin-bottom: 10px;
			}

			.monitor-count-status-desc .num {
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 18px;
				font-style: normal;
				margin-bottom: 10px;
			}

			.monitor-count-status-desc .num span {
				color: #69d9fe;
			}

			.monitor-position {
				display: flex;
				width: 100%;
				padding-left: 28px;
				padding-right: 42px;
				margin-top: 10px;
				position: relative;
			}

			.monitor-position-left {
				position: relative;
			}

			.monitor-position-left-title {
				position: absolute;
				top: 5px;
				left: 25%;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				font-size: 10px;
				color: #ffffff;
				text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
				text-align: left;
				font-style: normal;
			}

			.monitor-position-right-item {
				margin-bottom: 10px;
				position: relative;
			}

			.monitor-position-right-item.green {
				color: #24eacd;
			}

			.monitor-position-right-item.blue {
				color: #00b5ff;
			}

			.monitor-position-right-desc {
				position: absolute;
				left: 0;
				top: 0;
				padding-left: 30px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 10px;
				line-height: 40px;
				text-align: left;
				font-style: normal;
			}

			.monitor-position-right-desc .run-title {
				margin-left: 5px;
			}

			.monitor-position-right-desc .run-num {
				margin-left: 30px;
			}

			.monitor-status-run {
				background: url('img/loading/battery-bg.png') no-repeat 0 0;
				margin-bottom: 20px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				font-size: 12px;
				color: #ffffff;
				text-align: left;
				font-style: normal;
			}

			.monitor-status-run .battery {
				width: 25px;
				height: 30px;
				margin-left: 10px;
				margin-right: 30px;
			}
		</style>
	</body>
</html>
